$base : 46.875;
@function rem($px){
  @return $px / $base * 1rem;
}
body {
  background-image: url("../../dev/img/bg.png");
  background-size: cover;
  font-size: rem(24);
  font-weight: bold;
  color: #fff;
  header.top{
    height: rem(98);
    li{
      position: absolute;
      width: rem(130);
      height: rem(60);
      top: 1px;
    }
    li.top-back{
      left: 1px;
    }
    li.top-save{
      right: 1px;
    }
  }
  .main{
    position: relative;
    width: rem(710);
    height: calc(100vh - 387rem/46.875);
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    img{
      position: relative;
      top:50%;
      transform: translateY(-50%);
      max-width: rem(710);
      height:100%;
      border-radius: rem(15);
      pointer-events: none;
    }
    i{
      position: absolute;
      right: rem(32);
      bottom:rem(30);
    }
  }
  .tip{
    position: absolute;
    bottom:rem(258) ;
    width:rem(170) ;
    text-align: center;
    background: white;
    border-radius: rem(6);
    border:solid 1px #ff66a4;
    color: #ff66a4;
    box-sizing: border-box;
    z-index: 99;
    transform: scale(1);
    animation:tipshake 1.5s linear 0s 2;
    p{
      padding:rem(10) rem(16) ;
      white-space: normal;
    }
  }
  .tip:after{
    position: absolute;
    bottom: rem(-11);
    left: rem(75);
    content:"";
    display:block;
    width:rem(20);
    height: rem(20);
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
    background: white;
    border-right:1px solid #ff66a4;
    border-bottom:1px solid #ff66a4;
  }
  @keyframes tipshake
  {
    0%, 100% {-webkit-transform: rotate(0) scale(0.5);}
    10%, 30%, 50%, 70%, 90% {-webkit-transform: rotate(-10deg);}
    20%, 40%, 60%, 80% {-webkit-transform: rotate(10deg);}
  }
  .wrap{
    overflow-y: hidden;
    height:rem(287);
  }
  footer{
    height:rem(358);
    overflow-x: scroll ;
    margin-top: rem(29);
    font-weight: normal;
    .effect{
      display: inline-block;
      height: rem(225);
      margin-left: rem(22);
      margin-top: rem(16);
      white-space: nowrap;
      li{
        display: inline-block;
        vertical-align: top;
        overflow-x: hidden;
        .cover{
          position: relative;
          display: inline-block;
          text-align: center;
          margin-right: rem(14);
          border-radius: rem(6);
          overflow: hidden;
          vertical-align: top;
          z-index: 12;
          img{
            width:rem(170);
            height:rem(226);
          }
          span{
            position: absolute;
            left: 0;
            border-top: rem(60) solid #ff66a4;
            border-right: rem(60) solid transparent;
          }
          .icon-lock{
            position: absolute;
            top:rem(8);
            left:rem(8);
          }
          p{
            position: absolute;
            width: rem(170);
            line-height: rem(40);
            bottom: 0;
            background-color: #ff66a4;
            opacity: 0.9;
            z-index: 10;
          }
          .packup{
            position: absolute;
            top: 0;
            left: 0;
            width:rem(170);
            height:rem(226);
            text-align: center;
            .mask{
              position: absolute;
              width:rem(170);
              height:rem(226);
              background-color: #ff66a4;
              opacity: 0.5;
            }
            i{
              position: relative;
              margin-top: rem(58);
            }
          }
        }
        .material{
          display: inline-block;
          vertical-align: top;
          margin-top: rem(13);
          padding-right: rem(10);
          margin-right: rem(34);
          border-right: solid rem(2) #ecd1cd;
          transition: margin .5s;
          -webkit-transition: margin .5s; /* Safari 和 Chrome */

          .materialItem{
            position: relative;
            display: inline-block;
            margin-right: rem(12);
            border-radius: rem(6);
            overflow: hidden;
            text-align: center;
            img{
              width:rem(150);
              height:rem(200);
            }
            span{
              position: absolute;
              left: 0;
              border-top: rem(60) solid #ff66a4;
              border-right: rem(60) solid transparent;
            }
            .icon-lock{
              position: absolute;
              top:rem(8);
              left:rem(8);
            }
            p{
              position: absolute;
              width: rem(150);
              line-height: rem(35);
              bottom: 0;
              background-color: #ff66a4;
              opacity: 0.9;
              z-index: 10;
            }
            .checked{
              position: absolute;
              top: 0;
              left: 0;
              width:rem(150);
              height:rem(200);
              text-align: center;
              .mask{
                position: absolute;
                width:rem(150);
                height:rem(200);
                background-color: #ff66a4;
                opacity: 0.4;
              }
              i{
                position: relative;
                margin-top: rem(58);
              }
            }
          }
        }
        .open{
          transform: translateX(0);
          visibility: visible;
          display: inline-block;
        }
        .marginLeft{
          margin-left: rem(-2)!important;
        }
        .none{
          display: none;
        }
        .lock{
          position: absolute;
          width:rem(60);
          height:rem(60);
          display: none;
          z-index: 11;
        }
        .show{
          display: block;
        }
      }
    }
    .more{
      display: inline-block;
      width: rem(164);
      text-align: center;
      margin-right: rem(12);
      margin-top: rem(16);
      img{
        width: rem(116);
        height:rem(156);
      }
      p{
        margin-top: rem(20);
        color: #e1e1e1;
      }
    }

  }
  i{
    display: inline-block;
  }
  .icon-lock {
    background-image: url(../sprites/sprite.png);
    background-position: 0px 0px;
    width: rem(16);
    height: rem(18);
    background-size: rem(133);
  }
  .icon-checked {
    background-image: url(../sprites/sprite.png);
    background-position: 0px rem(-18);
    width: rem(41);
    height: rem(30);
    background-size: rem(133);
  }
  .icon-back {
    background-image: url(../sprites/sprite.png);
    background-position: 0px rem(-48);
    width: rem(126);
    height: rem(60);
    background-size: rem(133);
  }
  .icon-compare {
    background-image: url(../sprites/sprite.png);
    background-position: 0px rem(-108);
    width: rem(133);
    height: rem(60);
    background-size: rem(133);
  }
  .icon-save {
    background-image: url(../sprites/sprite.png);
    background-position: 0px rem(-168);
    width: rem(128);
    height: rem(60);
    background-size: rem(133);
  }
  .icon-packup {
    background-image: url(../sprites/sprite.png);
    background-position: 0px rem(-228);
    width: rem(67);
    height: rem(67);
    background-size: rem(133);
  }



}